<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.7.0.min.js"></script>
		<style>
			#text {
				width: 200px;
				text-align: center;
			}

			.red {
				color:red;
				text-decoration: underline;
			}
		</style>
		<script type="text/javascript">
			var flag = false;

			function toggleLight() {
				//var img=document.getElementById("light")
				var img = $("#light");
				//var text=document.getElementById("text")
				var text = $("#text");
				if (flag == false) {

					img.attr("src", "img/on.png");
					text.html("灯亮了");
					flag = true

					//text.attr("style","color:red;")
					//text.css("color","red")
					//将css样式表给text
					text.addClass("red");
				} else {
					img.attr("src", "img/off.png")
					text.html("灯灭了");
					flag = false
					//text.attr("style","color:black;")
					text.css("color", "black")
				}
			}
		</script>
	</head>
	<body>
		<div onclick="toggleLight()">
			<img src="img/off.png" id="light" width="200px">
			<h1 id="text">灯灭了</h1>
		</div>
	</body>
</html>